<template>
  <div class="product w">
    <div class="product-top clearfix">
      <div class="f-left product-text">
        <i class="iconfont icon-huowumingcheng mr-10 product_icon"></i>
        产品展示
      </div>
      <div class="product-btn f-right">
        <!-- <a-icon type="left-circle" style="margin-right:16px" theme="filled" />
          <a-icon type="right-circle" theme="filled" /> -->
        <i class="iconfont left_icon icon-gengduojiantou-copy" :class="productfrom.current > 1 ? 'blue' : ''"
          @click="LeftMian"></i>
        <i class="iconfont right_icon icon-gengduojiantou" :class="Math.floor(this.productfrom.total / 4) > productfrom.current
          ? ''
          : 'noblue'
          " @click="RightMian"></i>
      </div>
    </div>
    <div class="product-main">
      <div class="product-content" v-for="item in ProductList" :key="item.id" @click="JumpProductDetails(item.id)">
        <div class="product-img">
          <img v-if="item.productFile.length > 0" :src="wengewengeGetImageUrl(item.productFile[0].fileUrl)" alt="" />
          <img v-else src="../image/yifu.jpg" alt="" />
        </div>
        <div class="product_title row-ellipsis">
          {{ item.productName ? item.productName : "无" }}
        </div>
        <p class="price" v-if="item.isInterview != 1">¥{{ item.price }}</p>
        <p class="price" v-if="item.isInterview == 1">面议</p>
        <div class="product_category" :title="item.productOneCategoryName + '-' + item.productSecondCategoryName">
          {{
            item.productOneCategoryName ? item.productOneCategoryName : "无"
          }}
          {{ item.productSecondCategoryName }}
        </div>
        <div class="mt-10">
          <!-- <span class="tags">{{ productTag[item.productTag] }}</span> -->
          <span class="tags" v-if="item.productTagName">{{ item.productTagName }}</span>
          <!-- <span class="tags">制造</span> -->
          <i class="iconfont more_icon icon-gengduojiantou"></i>
        </div>
      </div>
      <div class=" wh-1200">
        <a-empty v-if="ProductList.length <= 0" />
      </div>
    </div>
  </div>
</template>
<script>
import { getList } from "@/apis/productProvide";
export default {

  data () {
    return {

      ProductList: [],
      productfrom: {
        total: 0,
        current: 1,
        size: 4,
      },

    }
  },
  methods: {
    LeftMian () {
      let _page = Math.floor(this.productfrom.total / 4);
      if (this.productfrom.current > 1) {
        this.productfrom.current = this.productfrom.current - 1;
        this.getproductData();
      } else {
        return;
      }
    },
    RightMian () {
      let _page = Math.floor(this.productfrom.total / 4);
      if (this.productfrom.current < _page) {
        this.productfrom.current = this.productfrom.current + 1;
        this.getproductData();
      } else {
        return;
      }
    },
    // 获取企业产品
    getproductData () {
      let _params = {
        size: this.productfrom.size,
        current: this.productfrom.current,
        entId: this.entId,
        productStatus: 1, //1上架，2下架
      };
      getList(_params)
        .then((res) => {
          console.log("企业产品");
          console.log(res);
          if (res.code == 200) {
            this.ProductList = res.data.records;
            this.productfrom.total = res.data.total;
          }
        })
        .catch((error) => { });
    },
  }
}
</script>

<style lang="less" scoped>
.product {
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 24px 21px;
  padding-bottom: 24px;
  // height: 481px;
  background-color: #ffffff;
  border-radius: 8px;

  .product-top {
    padding-bottom: 17px;
    border-bottom: 1px solid #ebeef5;

    .product-text {
      font-size: @font18;
    }

    .product_icon {
      font-size: 24px;
      color: #2a51bc;
    }

    .product-btn {
      font-size: 24px;

      .left_icon {
        cursor: pointer;
        color: #c0c4cc;
        margin-right: 16px;
        cursor: pointer;
      }

      .right_icon {
        color: #2a51bc;
        cursor: pointer;
      }
    }
  }

  .product-main {
    margin-top: 24px;
    display: flex;
    justify-content: left;
    align-items: left;

    .product-content {
      width: 285px;
      padding: 16px;
      background-color: #ffffff;
      border-radius: 4px;
      border: solid 1px #ebeef5;
      margin-right: 8px;

      &:hover {
        .iconfont {
          color: #188af1;
        }

        .product_title {
          color: #188af1;
        }
      }

      cursor: pointer;

      .product-img {
        width: 249px;
        height: 176px;

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          background-image: linear-gradient(90deg);
          border-radius: 4px;
        }
      }

      .product_title {
        font-size: @font18;
        line-height: 30px;
        letter-spacing: 0px;
        color: #303133;
        margin: 10px 0;
      }

      .price {
        font-size: @font18;
        letter-spacing: 0px;
        color: #ee6224;
      }

      .product_category {
        font-size: 14px;
        color: #909399;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .tags {
        display: inline-block;
        padding: 0 15px;
        border: solid 1px #0da9b0;
        color: #0da9b0;
        border-radius: 20px;
        margin-right: 10px;
        font-size: 14px;
        height: 24px;
        line-height: 24px;

        &:nth-child(2) {
          border: solid 1px #188af1;
          color: #188af1;
        }
      }

      .more_icon {
        font-size: 18px;
        color: #909399;
        float: right;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.blue {
  color: #2a51bc !important;
}

.noblue {
  color: #909399 !important;
}
</style>